<template>
  <div class="infinite-container">
    <!-- <div class="topHandler flex">
      <div>
        <mu-select-field v-model="selDept" style="width:100%; padding-top:4px;" @input="changeDept">
          <mu-menu-item v-for="(item,index) in deptList" :key="index" :value="item.deptId" :title="item.consultDeptName" />
        </mu-select-field>
        <div class="bbar"></div>
      </div>
      <div>
        <mu-switch label="在线医生" v-model="params.online" @input="changeOnline" labelLeft/>
      </div>
    </div>-->
    <empty v-show="isEmpty"></empty>
    <ul class="doctorList">
      <li
        class="flex flex_vcenter"
        v-for="(item,index) in doctors"
        @click="goSelDoctor(item)"
        :key="index"
      >
        <!-- <img src="../../assets/hzssyy/icon_qdqh.png" alt=""> -->
        <img v-lazy="item.header" alt />
        <!-- <div class="ostatus" v-if="item.online==1">在线</div> -->
        <div class="flex_full">
          <div>
            <span class="docName">{{item.name||""}}</span>
            <span class="borderBtn" v-if="item.imageFlag==1">咨询</span>
            <span class="borderBtn" v-if="item.returnFlag==1">处方</span>
          </div>
          <div style="padding:5px 0;" class="text-gray">
            <span>{{item.jobTitle||""}}</span>
            <span>{{item.deptname||""}}</span>
          </div>
          <div class="text-gray">
            <span class="goodAt">擅长</span>
            <span>{{item.expert||"暂无"}}</span>
            <span></span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import empty from "@/components/empty";
import { commonAjaxJson, RESTFUL_API } from "@/api/api";
export default {
  data() {
    return {
      isEmpty: false,
      selDept: "",
      deptList: [],
      switchStatus: false,
      doctors: [],
      params: {
        hospitalCode: this.$ORG_CODE,
        departmentCode: ""
        // online: false
      }
    };
  },
  mounted() {
    this.params.departmentCode = this.$route.query.departmentCode;
    this.getFillDoctors();
  },
  components: {
    empty
  },
  methods: {
    getFillDoctors() {
      commonAjaxJson(RESTFUL_API.getFillDoctors, this.params).then(res => {
        if (res) {
          this.doctors = res.data.data || [];
          this.isEmpty = !this.doctors.length;
        } else {
          this.isEmpty = true;
        }
      });
    },

    goSelDoctor(item) {
      this.$router.replace({
        path: "/medicalAgain/medChose",
        query: item
      });
    }
  }
};
</script>

<style scoped lang="less">
@import "../../common/css/flex.css";
@import "../../common/css/component";
.infinite-container {
  //   .borderBtn {
  //     font-size: 9px;
  //     padding: 2px 4px;
  //     color: #FF6600;
  //     border-color: #FF6600;
  //   }
  //   .goodAt {
  //     font-size: 12px;
  //     background: #ffac29;
  //   }
  //   .text-gray {
  //     color: #666;
  //   }
  //   .docName {
  //     color: #333;
  //   }
  //   @{deep} .search-bar .icon-ssousuo {
  //     top: 0;
  //   }
  //   @{deep} .search-bar .search-input {
  //     height: 30px;
  //   }
  //   @{deep} .mu-switch-label {
  //     color: #999;
  //   }
  //   @{deep} .mu-dropDown-menu-text-overflow {
  //     text-align: right;
  //     color: #2abc6d;
  //   }
  //   @{deep} .mu-dropDown-menu-icon {
  //     fill: #2abc6d;
  //   }
}

// .topDeptList {
//   padding: 10px 0;
//   li {
//     width: 20%;
//     text-align: center;
//     img {
//       width: 30px;
//     }
//   }
//   background-color: white;
//   margin-top: 44px;
// }

.doctorList {
  position: relative;
}

.ostatus {
  width: 42px;
  height: 21px;
  position: absolute;
  font-size: 10px;
  color: #fff;
  text-align: center;
  top: 0px;
  right: 15px;
  background: url("../../assets/wzjl/tab_zxwz_zx.png") no-repeat center
    center/100% 100%;
}

.topHandler {
  background-color: white;
  > div:first-child {
    width: 44%;
    position: relative;
    .bbar {
      position: absolute;
      right: 10px;
      bottom: 0;
      width: 96px;
      background: #2abc6d;
      height: 3px;
    }
  }
  > div {
    box-sizing: border-box;
    width: 50%;
    padding: 0 10px;
    text-align: center;
    height: 44px;
    line-height: 44px;
  }
}

.underlineClass {
  color: green;
}
</style>
